<template>
	<view class="">
		<view class="flex">
			<view class="italic">剩余时间</view>
			<countdown downTime="2022-10-20 17:30:00" background="#FFF" fontColor="#41644A" lineHeight="40" fontSize="27"></countdown>
		</view>

		<view class="column product-card">
			<image src="https://wx.2024csnl.com/static/goods/jpcp.png" mode="aspectFill" class="product-card-img" />
			<view class="product-info">
				<view class="between align">
					<view class="product-name">潮流男鞋运动款</view>
					<view class="c-red product-price">
						<text>￥</text>
						<text class="price-num">3339.9</text>
					</view>
				</view>
				<view class="product-bidding-info">
					<view class="">
						<text>竞拍价格：</text>
						<text class="bidding-price c-red">￥</text>
						<text class="price-num c-red">299.9</text>
					</view>
					<view class="mtb">
						<text>可选尺码：</text>
						<text>42-40-43-44</text>
					</view>
					<view class="">点击下方按钮任意选择或自定义出价</view>
				</view>
				<view class="between align">
					<view class="bidding-btn">+50元</view>
					<view class="bidding-btn">+150元</view>
					<view class="bidding-input-box">
						<input type="text" class="bidding-input" placeholder="自定义">
					</view>
				</view>
			</view>
		</view>

		<view class="bidding-list ">
			<image src="https://wx.2024csnl.com/static/goods/bidding-bg.png" mode="widthFix" style="width: 710rpx;" />
			<view class="title">竞拍实时动态</view>
			<view class="swiper">
				<swiper style="height: 80rpx;" :autoplay="true" circular vertical :interval="3000" :duration="1000">
					<swiper-item v-for="(v,i) in 2" :key="i">
						<view class="swiper-item flex align">
							<image src="https://wx.2024csnl.com/static/holdshares/head.jpeg" mode="aspectFill" class="swiper-img" />
							<view>155****2227竞拍出价</view>
							<view>+500元</view>
							<view class="date">刚刚</view>
						</view>
					</swiper-item>
				</swiper>
				<view v-for="(v,i) in 4" :key="i">
					<view class="swiper-item flex align">
						<image src="https://wx.2024csnl.com/static/holdshares/head.jpeg" mode="aspectFill" class="swiper-img" />
						<view>155****2227竞拍出价</view>
						<view>+500元</view>
						<view class="date">刚刚</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import countdown from '@/components/countdown.vue'
	export default {
		components: {
			countdown
		},
		data() {
			return {

			}
		},
		methods: {

		}
	}
</script>

<style>
	page {
		background-color: #41644A;
		padding: 20rpx;
	}
</style>

<style lang="scss" scoped>
	.italic {
		font-style: italic;
		color: #FFF;
		margin-right: 40rpx;
	}

	.product-card {
		margin-top: 20rpx;
		border-radius: 20rpx;
		.product-card-img {
			width: 710rpx;
			height: 368rpx;
			border-radius: 20rpx 20rpx 0 0;
		}

		.product-info {
			background-color: #FFF;
			padding: 20rpx;
			padding-bottom: 40rpx;
			border-radius: 0 0 20rpx 20rpx;
			.product-name {
				font-size: 29rpx;
			}
			.product-price {
				font-size: 20rpx;
				font-weight: bold;
				margin-right: 8rpx;
				.price-num {
					font-size: 40rpx;
				}
			}
			.product-bidding-info {
				padding: 20rpx 24rpx;
				font-size: 27rpx;
				background-color: #F7F7F7;
				margin: 45rpx 0;
				.bidding-price {
					font-size: 20rpx;
					font-weight: bold;
				}
				.price-num {
					font-size: 32rpx;
					font-weight: bold;
				}
				.mtb {
					margin: 24rpx 0;
				}
			}
			.bidding-btn {
				width: 168rpx;
				line-height: 64rpx;
				text-align: center;
				background-color: #41644A;
				color: #FFF;
				border-radius: 8rpx;
			}
			.bidding-input-box {
				width: 168rpx;
				height: 64rpx;
				border-radius: 8rpx;
				background-color: #F0F0F0;
				.bidding-input {
					width: 128rpx;
					padding: 0 20rpx;
					line-height: 64rpx;
					text-align: center;
					transform: translate(0,25%);
				}
			}

		}
	}

	.bidding-list {
		margin: 56rpx 0;
		position: relative;
		.title {
			position: absolute;
			left: 0;
			right: 0;
			top: 0;
			text-align: center;
			line-height: 60rpx;
			font-weight: bold;
			font-family: '黑体';
			background: linear-gradient(to top, #EA2F04, #FA5819);
			-webkit-background-clip: text;
			color: transparent; // 转变为行内块元素 文字渐变才会生效
			display: inline-block;
		}
		.swiper {
			padding: 0 20rpx;
			position: absolute;
			top: 80rpx;
			left: 30rpx;
			z-index: 9;
			.swiper-item {
				margin-bottom: 24rpx;
				font-size: 27rpx;
				line-height: 64rpx;
				.swiper-img {
					width: 54rpx;
					height: 54rpx;
					border-radius: 50%;
					margin-right: 16rpx;
				}
				.date {
					font-size: 20rpx;
					color: #B3B3B3;
					margin-left: 16rpx;
				}
			}
		}
	}
</style>
